<template>
    <el-breadcrumb separator="/">
        <transition-group name="fade">
            <el-breadcrumb-item v-for="(item,index) in BreadcrumbData" :key="item+index">
                <a :key="index">{{ item }}</a>
            </el-breadcrumb-item>
        </transition-group> 
    </el-breadcrumb>
</template>

<script setup>
// 面包屑路由展示
import {computed} from 'vue'
import { useRoute } from "vue-router";
const route = useRoute() // 当前组件的信息
const BreadcrumbData = computed(()=>{
    let data = []
        for (let i of route.matched){
            data.push(i.meta.title)
        }
    return data
})

</script>


<style lang="scss">
// 过渡效果
.fade-enter-from,.fade-leave-to{
    position: absolute;
    transition: all 0.5s;
    transform: translateX(-20px);
    opacity: 0;
}
</style>